
<template>
    <draggable v-if="data.open" :initial-top="100" :initial-left="1300" handle="test-modal-header">
        <div class="test-modal">
            <div class="test-modal-header">
                <div class="test-modal-title">测试</div>
                <span class="test-modal-close" title="关闭" @click="closeTestModal">
                    <CloseOutlined />
                </span>
            </div>
            <div class="test-modal-body">
                <div class="test-item">
                    <a-input-search v-model:value="data.hideCompValue" class="btn" placeholder="输入需要隐藏的组件name"
                        enter-button="隐藏" @search="hideComponent" />
                </div>
                <div class="test-item">
                    <a-input-search v-model:value="data.showCompValue" class="btn" placeholder="输入需要显示的组件name"
                        enter-button="显示" @search="showComponent" />
                </div>
                <div class="test-item">
                    <a-input-search v-model:value="data.hideCompGroupValue" class="btn" placeholder="输入需要隐藏的分组name"
                        enter-button="隐藏" @search="hideComponentGroup" />
                </div>
                <div class="test-item">
                    <a-input-search v-model:value="data.showCompGroupValue" class="btn" placeholder="输入需要显示的分组name"
                        enter-button="显示" @search="showComponentGroup" />
                </div>
                <div class="test-item">
                    <a-button type="primary" class="btn mr5" @click="viewComponentList">查看已注册的组件数据</a-button>
                    <a-button type="primary" class="btn" @click="setPageTemplate">设置页面模板数据</a-button>
                </div>
                <div class="test-item">
                    <a-button type="primary" class="btn mr5" @click="getPageTemplate">获取页面模板</a-button>
                    <a-button type="primary" class="btn mr5" @click="resetPage">重置页面</a-button>
                    <a-button type="primary" class="btn mr5" @click="undo">撤销</a-button>
                    <a-button type="primary" class="btn" @click="redo">重做</a-button>
                </div>
                <div class="test-item">
                    <a-input-search v-model:value="data.pageTypeValue" class="btn" placeholder="输入页面类型pc、ipad、mobile"
                        enter-button="设置" @search="setPageType" />
                </div>
                <div class="test-item">
                    <a-button type="primary" class="btn" @click="openJsonView">查看源码</a-button>
                </div>
            </div>
        </div>
    </draggable>

    <a-float-button @click="handleClick" title="测试" style="right:50px" />
</template>

<script setup>
import { ref, reactive } from 'vue'
import draggable from './draggable.vue';
import { manager } from '@/package/index'

const props = defineProps({
    designerManager: {
        type: Object,
    }
})

const data = reactive({
    open: false,
    hideCompValue: "",  // 隐藏组件的值
    showCompValue: "",  // 显示组件的值
    hideCompGroupValue: "",
    showCompGroupValue: "",
    pageTypeValue: '',
    pageTemplate: {
        "data": {
            "type": "page",
            "label": "页面",
            "layout": "flow",
            "width": "100%",
            "height": "100%",
            "children": [
                {
                    "name": "下拉框",
                    "label": "下拉框",
                    "icon": "DownSquareOutlined",
                    "type": "select",
                    "layoutType": "flow",
                    "componentProps": {
                        "bordered": true,
                        "options": [
                            {
                                "label": "选项1",
                                "value": "1"
                            },
                            {
                                "label": "选项2",
                                "value": "2"
                            }
                        ],
                        "style": {}
                    },
                    "optionName": "selectOptions",
                    "groupName": "基础组件",
                    "isShow": true,
                    "id": "select_08371",
                    "active": false,
                    "field": "select_08371"
                },
                {
                    "name": "输入框",
                    "label": "输入框",
                    "icon": "EditOutlined",
                    "type": "input",
                    "field": "testInputValue",
                    "layoutType": "flow",
                    "componentProps": {
                        "bordered": true,
                        "style": {}
                    },
                    "optionName": "inputOptions",
                    "groupName": "基础组件",
                    "isShow": true,
                    "id": "input_08474",
                    "active": true,
                    "event": {
                        "input": [
                            {
                                "name": "输入值",
                                "methodName": "test"
                            }
                        ]
                    }
                },
                {
                    "name": "文本域",
                    "label": "文本域",
                    "icon": "FormOutlined",
                    "type": "textarea",
                    "layoutType": "flow",
                    "componentProps": {
                        "bordered": true,
                        "style": {},
                        "autoSize": {
                            "minRows": 2,
                            "maxRows": 4
                        }
                    },
                    "optionName": "textareaOptions",
                    "groupName": "基础组件",
                    "isShow": true,
                    "id": "textarea_02559",
                    "active": false,
                    "field": "textarea_02559"
                }
            ],
            "componentProps": {
                "style": {
                    "padding": "30px",
                    "width": "100%",
                    "height": "100%"
                }
            }
        },
        "script": "const { dcDefineExpose, pageData, getComponents } = this;\n\nfunction test() {\n    console.log('test')\n\n    alert(\"!!\");\n}\n\n// 通过ID获取组件示例\nfunction getComponentById() {\n    let item = getComponents('inputNumber_02'); // 获取组件\n    item.setValue('8888');             // 组件赋值\n    let itemValue = item.getValue();   // 获取组件的值\n\n    console.log(\"获取的组件：\", item);\n    console.log(\"组件的值：\", itemValue);\n}\n\n// 获取所有组件示例\nfunction getAllComponent() {\n    let arr = getComponents();  // 获取所有组件\n    console.log(\"所有组件：\", arr);\n}\n\nfunction test4() {\n    console.log('test4')\n    alert(\"测试test4函数\")\n}\n\n// 全部隐藏\nfunction allHidden() {\n    // alert(\"测试点击事件\")\n    // componentProps\n    let arr = getComponents();\n\n    for (let i = 0; i < arr.length; i++) {\n        let item = arr[i];\n        if(item.type != \"button\"){\n            item.componentProps.hidden = true;\n        }\n    }\n}\n\n// 全部显示\nfunction allShow() {\n    // alert(\"测试点击事件\")\n    // componentProps\n    let arr = getComponents();\n\n    for (let i = 0; i < arr.length; i++) {\n        let item = arr[i];\n        if(item.type != \"button\"){\n            item.componentProps.hidden = false;\n        }\n    }\n}\n\n// 全部禁用\nfunction allDisabled() {\n    // alert(\"测试点击事件\")\n    // componentProps\n    let arr = getComponents();\n\n    for (let i = 0; i < arr.length; i++) {\n        let item = arr[i];\n        if(item.type != \"button\"){\n            item.componentProps.disabled = true;\n        }\n    }\n}\n\n\n// 全部启用\nfunction allEnable() {\n    // alert(\"测试点击事件\")\n    // componentProps\n    let arr = getComponents();\n\n    for (let i = 0; i < arr.length; i++) {\n        let item = arr[i];\n        if(item.type != \"button\"){\n            item.componentProps.disabled = false;\n        }\n    }\n}\n\n\n\n// 函数编辑或新增后请在下方向外暴露\n// 函数编辑后请点击左下方更新函数的按钮\ndcDefineExpose({\n    test,\n    getComponentById,\n    getAllComponent,\n    allHidden,\n    allShow,\n    allDisabled,\n    allEnable\n})"
    }
})

// 查看当前已注册的组件数据
const viewComponentList = () => {
    console.log("当前已注册的组件：", manager.getComponentList())
}

// 隐藏对应组件
const hideComponent = () => {
    props.designerManager.hideComponent(data.hideCompValue);
}

// 显示对应组件
const showComponent = () => {
    props.designerManager.showComponent(data.showCompValue)
}

// 隐藏对应分组
const hideComponentGroup = () => {
    props.designerManager.hideComponentGroup(data.hideCompGroupValue)
}

// 显示对应分组
const showComponentGroup = () => {
    props.designerManager.showComponentGroup(data.showCompGroupValue)
}

// 设置页面模板
const setPageTemplate = () => {
    props.designerManager.setPageTemplate(data.pageTemplate)
}

// 获取页面模板
const getPageTemplate = () => {
    let pageTemplate = props.designerManager.getPageTemplate()
    console.log("页面模板：", pageTemplate);
}

// 设置页面类型
const setPageType = () => {
    props.designerManager.setPageType(data.pageTypeValue)
}

// 重置页面
const resetPage = () => {
    props.designerManager.resetPage();
}

// 撤销
const undo = () => {
    props.designerManager.undo();
}

// 重做
const redo = () => {
    props.designerManager.redo();
}

// 打开源码弹窗
const openJsonView = () => {
    props.designerManager.viewSourceCode();
}



const handleClick = () => {
    data.open = !data.open;
}
const closeTestModal = () => {
    data.open = false;
}

</script>
<style lang="less" scoped>
.test-modal {
    position: relative;
    width: 400px;
    height: 500px;
    // top: 30px;
    // right: 20px;
    z-index: 999999;
    background-color: #fff;
    border: 1px solid var(--borderColor);
    box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
    border-radius: 6px;

    .test-modal-header {
        padding: 10px 20px;
        border-bottom: 1px solid var(--borderColor);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .test-modal-close {
            color: #999;
            cursor: pointer;
            transition: all 0.2s;
            &:hover {
                color: #333;
            }
        }
    }

    .test-modal-body {
        padding: 10px;

        .test-item {
            margin-bottom: 10px;
        }
    }
}

.mr5 {
    margin-right: 5px;
}
</style>